import React, {
    PureComponent
} from 'react';

import {
    View,
    Image,
    StyleSheet
} from 'react-native';


interface Props {
    icon:any
}

class MeItem extends PureComponent<Props> {
    static defaultProps = {
        icon:null
    }
    render() {
        const {
            icon,
            children
        } = this.props;
        return (
            <View>
                <View style={styles.headerStyle}>
                    <View style={styles.lineStyle} />
                    <Image
                        source={icon}
                        style={styles.iconStyle}
                    />
                    <View style={styles.lineStyle} />
                </View>
                <View
                    children={children}
                    style={styles.contentStyle}
                />
            </View>
        )
    }
}

export default MeItem;

const styles = StyleSheet.create({
    headerStyle:{
        paddingVertical:6,
        alignItems:`center`,
        flexDirection:`row`
    },
    lineStyle:{
        flex:1,
        height:1.5,
        backgroundColor:`#666`
    },
    iconStyle:{
        marginHorizontal:10
    },
    contentStyle:{
        paddingBottom:12
    }
}) as any;